“Phoebe” Documentation by “IG_design” v1.0

“Phoebe”

Created: 20/08/2014
By: Ivan Grozdic aka IG_design
Email: ivang.design@yahoo.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

CSS Files
Image Files
JavaScript
Sources and Credits

B) CSS Files and Structure - top

This theme uses css files contained in the css folder

Css files:

base
layout
font-awesome
skeleton

Css file layout:

Menu:


 
ul.slimmenu li a.mPS2id-highlight{
	border:1px solid #000;
}

#menu-wrap{
    position: fixed;
	padding-bottom:10px;
	width:100%;
	z-index:10000;
	top:0;
	left:0;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}

.menu-back{
	background:rgba(250,250,250,0);
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}


.cbp-af-header {
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}

.cbp-af-header.cbp-af-header-shrink {
	background:rgba(250,250,250,1);
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.cbp-af-header.cbp-af-header-shrink .logo{
	width:115px;
	height:40px;
	top:22px;
	background:url('../images/logo.png') no-repeat center center;
	background-size:115px 40px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}

.cbp-af-header.cbp-af-header-shrink ul.slimmenu {
	margin-top:1px;
	margin-bottom:0;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.cbp-af-header.cbp-af-header-shrink ul.slimmenu li:first-child {
	background:none;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.cbp-af-header.cbp-af-header-shrink ul.slimmenu li ul li:first-child { 
	background:none;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;  }
ul.slimmenu li ul li a {
    color: #000;
}
ul.slimmenu li ul li a:hover {
}
ul.slimmenu li ul li { 
	background:none;
	padding-left:0; }
ul.slimmenu li ul {
	background:rgba(250,250,250,.95);
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}






.logo{
	position:absolute;
	width:145px;
	height:50px;
	z-index:10000;
	left:10px;
	top:26px;
	background:url('../images/logo.png') no-repeat center center;
	background-size:145px 50px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}



.menu-collapser {
    position: relative;
    width: 100%;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    padding: 0 8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.collapse-button {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 40px;
    background-image: linear-gradient(to bottom, #151515, #040404);
    background-repeat: repeat-x;
    border-style: solid;
    border-width: 1px;
    color: #000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075);
    padding: 7px 10px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-size: 14px;
    text-align: center;

    transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.collapse-button:hover, .collapse-button:focus {
    background-image: none;
    background-color: #040404;
    color: #FFF;
}
.collapse-button .icon-bar {
    background-color: #fff;
    border-radius: 1px 1px 1px 1px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    display: block;
    height: 2px;
    width: 18px;
    margin: 2px 0;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}

ul.slimmenu {
	padding-top:10px;
	padding-right:10px;
	text-align:right;
	margin-top:13px;
	margin-bottom:10px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
ul.slimmenu li {
    position: relative;
    display: inline-block;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
ul.slimmenu > li {}
ul.slimmenu > li:first-child { border-left: 0 }
ul.slimmenu > li:last-child { margin-right: 0 }
ul.slimmenu li a {
    display: block;
    color: #000;
    padding: 8px 23px;
	margin: 2px 0;
	cursor:pointer;
	font-family: 'Lato', sans-serif;
	font-weight:700;
	text-transform:uppercase;
    border-bottom:1px solid rgba(0,0,0,0);
    font-size: 12px;
	border:1px solid transparent;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}


ul.slimmenu li a::before,
ul.slimmenu li a::after  {
	position: absolute;
	top: 2px;
	left: 0;
	width: calc(100% - 2px);
	height: calc(100% - 6px);
	border: 1px solid transparent;
	content: '';
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

ul.slimmenu li a::after  {
	border-color: #000;
	opacity: 0;
	-webkit-transform: translateY(-7px) translateX(6px);
	-moz-transform: translateY(-7px) translateX(6px);
	transform: translateY(-7px) translateX(6px);
}

ul.slimmenu li a:hover::before,
ul.slimmenu li a:focus::before {
	opacity: 0;
	-webkit-transform: translateY(5px) translateX(-5px);
	-moz-transform: translateY(5px) translateX(-5px);
	transform: translateY(5px) translateX(-5px);
}

ul.slimmenu li a:hover::after,
ul.slimmenu li a:focus::after  {
	opacity: 1;
	-webkit-transform: translateY(0px) translateX(0px);
	-moz-transform: translateY(0px) translateX(0px);
	transform: translateY(0px) translateX(0px);
}





ul.slimmenu li a:hover {
    text-decoration: none;
	border:1px solid #000;
}
ul.slimmenu li {
}
ul.slimmenu li:first-child {
	background:none;
}

ul.slimmenu li .sub-collapser {
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 100%;
    z-index: 999;
    cursor: pointer;
}
ul.slimmenu li .sub-collapser:before {
	display:none;
}
ul.slimmenu li .sub-collapser > i {
	display:none;
}
ul.slimmenu li ul {
    margin: 0;
    list-style-type: none;
}
ul.slimmenu li ul a{
    font-size:10px;
}
ul.slimmenu li ul li:first-child { 
	background:none; }
ul.slimmenu li ul li {
	background:none;
	padding-left:0; }
ul.slimmenu li > ul {
    display: none;
    position: absolute;
	text-align:left;
    left: 0;
    top: 100%;
    z-index: 999;
    width: 150%;
}
ul.slimmenu li > ul > li ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 999;
    width: 100%;
}
ul.slimmenu.collapsed {
	padding:0;
	margin:0;
}
ul.slimmenu.collapsed li {
    display: block;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
ul.slimmenu.collapsed li a {
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}
ul.slimmenu.collapsed li .sub-collapser {
    height: 40px;
}
ul.slimmenu.collapsed li > ul {
    display: none;
    position: static;
}

About:


.about{
	position: relative; 
	margin: 0 auto;
	width: 100%;
	overflow:hidden;
	padding-top:50px;
}
.about h1{
	text-align:center;
}
.sub-text{
	position: relative;
	width:100%;
	max-width:900px;
	margin:0 auto;
	text-align:center;
    font-family: 'TisaPro-Ita';
	letter-spacing:2px;
	font-size: 18px;
	line-height: 26px;
	color:#646464;
	margin-bottom:40px;
}
.sub-text a {
	position: relative;
	display: inline-block;
	outline: none;
	vertical-align: bottom;
	text-decoration: none;
	white-space: nowrap;
}
.sub-text a::before,
.sub-text a::after {
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
.sub-text a {
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
}
.sub-text a:hover,
.sub-text a:focus {
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
}
.sub-text a::before {
	position: absolute;
	top: -1px;
	left: -7px;
	box-sizing: content-box;
	padding: 0 5px;
	width: 100%;
	height: 100%;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
	transition: opacity 0.2s, transform 0.2s;
	-webkit-transform: scale(0.8333);
	transform: scale(0.8333);
}
.sub-text a:hover::before,
.sub-text a:focus::before {
	opacity: 1;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}


.about-top h5{
	text-align:left;
	padding-bottom:20px;
}
.about-top p{
	text-align:left;
}
.biger-text-top{
	font-family: 'Lato', sans-serif;
	text-align:left;
	font-weight:300;
	letter-spacing:1px;
	font-size: 22px;
	line-height:32px;
	color:#606060;
	padding-bottom:20px;
}



.about-box{
	position: relative; 
	margin: 0 auto;
	width: 100%;
	overflow:hidden;
	padding-bottom:30px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.about-box:last-child{
	padding-bottom:0;
}
.about-box h5{
	text-align:left;
	margin-left:60px;
	padding-bottom:20px;
}
.about-box p{
	text-align:left;
	margin-left:60px;
}
.about-box .about-box-icon{
	position: relative; 
	font-family: 'FontAwesome';
	font-size:25px;
	line-height:25px;
	text-align:center;
	width: 60px;
	height:30px;
	float:left;
	display:inline-block; 
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}


.facts{
	position: relative; 
	margin: 0 auto;
	width: 100%;
	overflow:hidden;
	background:#fff;
	padding-top:70px;
	padding-bottom:70px;
	margin-top:70px;
	margin-bottom:70px;
}
.fact-wrap{
	position: relative; 
	margin: 0 auto;
	width: 100%;
	overflow:hidden;
}
.fact-wrap .fact-icon{
	position: relative; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;  
	box-sizing: border-box;
	font-family: 'FontAwesome';
	font-size:20px;
	line-height:60px;
	width:60px;
	height:60px;
	border:1px solid #000;
	margin:0 auto;
	text-align:center;
}
.fact-wrap h3{
	text-align:center;
	padding-top:20px;
}
.fact-wrap p{
	text-align:center;
	padding-top:5px;
    font-family: 'TisaPro-Ita';
	letter-spacing:1px;
}


.team{
	position: relative; 
	margin: 0 auto;
	width: 100%;
	overflow:hidden;
	padding-bottom:70px;
}


.team-box{
	position: relative; 
	margin: 0 auto;
	width: 100%;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.team-box img{
  width:100%;
  height:auto;
  display:block;
}
.team-box:before, .team-box:after{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.team-box:after{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

.team-box-down{
	position: relative; 
	margin: 0 auto;
	width: 100%;
	margin-top:30px;
}
.team-box-down h6{
	padding-bottom:5px;
	text-align:center;
}
.team-box-down p{
	text-align:center;
    font-family: 'TisaPro-Ita';
	letter-spacing:1px;
}
.team-box-down .social-team{
	position: relative; 
	padding-top:30px;
	margin: 0 auto;
	width: 100%;
	text-align:center;
}
.team-box-down .social-team a{
	position: relative;
	font-family: 'FontAwesome';
	font-size:13px;
	line-height:35px;
	width:35px;
	height:35px;
	color:#000;
	margin:0 5px;
	display:inline-block;
	text-align:center;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.team-box-down .social-team  a::before,
.team-box-down .social-team  a::after  {
	position: absolute;
	text-align:center;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	border: 1px solid #000;
	content: '';
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}
.team-box-down .social-team  a::after  {
	text-align:center;
	opacity: 0;
	-webkit-transform: translateY(-7px) translateX(6px);
	-moz-transform: translateY(-7px) translateX(6px);
	transform: translateY(-7px) translateX(6px);
}
.team-box-down .social-team  a:hover::before,
.team-box-down .social-team  a:focus::before {
	opacity: 0;
	-webkit-transform: translateY(5px) translateX(-5px);
	-moz-transform: translateY(5px) translateX(-5px);
	transform: translateY(5px) translateX(-5px);
}
.team-box-down .social-team  a:hover::after,
.team-box-down .social-team  a:focus::after  {
	opacity: 1;
	-webkit-transform: translateY(0px) translateX(0px);
	-moz-transform: translateY(0px) translateX(0px);
	transform: translateY(0px) translateX(0px);
}


.about-bottom{
	position: relative; 
	margin: 0 auto;
	width: 100%;
}
.about-bottom-left{
	position: relative; 
	margin: 0 auto;
	width: 50%;
	float:left;
	display:inline-block;
	background:#fff;
	padding-top:40px;
	padding-bottom:40px;
}
.about-bottom-left p{
	text-align:center;
	padding-bottom:20px;
    font-family: 'TisaPro-Ita';
	letter-spacing:2px;
	font-size: 16px;
}


.about-bottom-left .link-left {
	position: relative; 
	margin: 0 auto;
	text-align:center;
}
.about-bottom-left .link-left a{
	position: relative; 
	padding: 10px 35px;
	font-family: 'Lato', sans-serif;
	text-align:center;
	text-transform:uppercase;
	font-weight:400;
	letter-spacing:2px;
	font-size: 12px;
	color:#000;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.about-bottom-left .link-left a::before{
	border: 1px solid #000;
}
.about-bottom-left .link-left a::before,
.about-bottom-left .link-left a::after  {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.about-bottom-left .link-left a::after  {
	opacity: 0;
	-webkit-transform: translateY(-7px) translateX(6px);
	-moz-transform: translateY(-7px) translateX(6px);
	transform: translateY(-7px) translateX(6px);
}

.about-bottom-left .link-left a:hover::before,
.about-bottom-left .link-left a:focus::before {
	opacity: 0;
	-webkit-transform: translateY(5px) translateX(-5px);
	-moz-transform: translateY(5px) translateX(-5px);
	transform: translateY(5px) translateX(-5px);
}

.about-bottom-left .link-left a:hover::after,
.about-bottom-left .link-left a:focus::after  {
	opacity: 1;
	-webkit-transform: translateY(0px) translateX(0px);
	-moz-transform: translateY(0px) translateX(0px);
	transform: translateY(0px) translateX(0px);
}







.about-bottom-right{
	position: relative; 
	margin: 0 auto;
	width: 50%;
	float:left;
	display:inline-block;
	padding-top:40px;
	padding-bottom:40px;
}
.about-bottom-right p{
	text-align:center;
	padding-bottom:20px;
	color:#fff;
    font-family: 'TisaPro-Ita';
	letter-spacing:2px;
	font-size: 16px;
}

.about-bottom-right .link-right {
	position: relative; 
	margin: 0 auto;
	text-align:center;
}
.about-bottom-right .link-right a{
	position: relative; 
	padding: 10px 35px;
	font-family: 'Lato', sans-serif;
	text-align:center;
	text-transform:uppercase;
	font-weight:400;
	letter-spacing:2px;
	font-size: 12px;
	color:#fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.about-bottom-right .link-right a:hover{
	color:#000;
}
.about-bottom-right .link-right a::before,
.about-bottom-right .link-right a::after  {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 1px solid #fff;
	content: '';
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.about-bottom-right .link-right a::after  {
	border-color: #000;
	opacity: 0;
	-webkit-transform: translateY(-7px) translateX(6px);
	-moz-transform: translateY(-7px) translateX(6px);
	transform: translateY(-7px) translateX(6px);
}

.about-bottom-right .link-right a:hover::before,
.about-bottom-right .link-right a:focus::before {
	opacity: 0;
	-webkit-transform: translateY(5px) translateX(-5px);
	-moz-transform: translateY(5px) translateX(-5px);
	transform: translateY(5px) translateX(-5px);
}

.about-bottom-right .link-right a:hover::after,
.about-bottom-right .link-right a:focus::after  {
	opacity: 1;
	-webkit-transform: translateY(0px) translateX(0px);
	-moz-transform: translateY(0px) translateX(0px);
	transform: translateY(0px) translateX(0px);
}

C) Image Files - top

All the graphic elements for the entire theme are contained at the "images" folder.

D) JavaScript - top

All the pages link the neccessary js files inside the "head" tag of the document. If you need to modify the behavior from a certain jquery element open the "js" folder where you can alter the parameters of some of the js elements.

E) Sources and Credits - top

I've used the following images, icons or other files as listed.

JAVASCRIPT

FONTS

Lato

Once again, thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

IG_design

Go To Table of Contents